<template>
  <el-container>
    <el-header style="height: auto;padding: 0px 0px; ">
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        id="Bar"
      />
    </el-header>
    <el-main style="padding: 0px 0px;" v-model="ewmMsg">
      <el-row style="padding: 5px 0px 5px 0px; ;">
        <el-col :span="5" :offset="1" :pull="1">
          <el-input
            v-model="gcdString"
            @keyup.enter.native="handleGcdInputEnter"
          >
            <template slot="prepend">
              <span class="searchFont">单号</span>
            </template>
          </el-input>
        </el-col>
        <el-col :span="5" :offset="1" :pull="1">
          <el-input v-model="invid" readonly="true">
            <template slot="prepend">
              <span class="searchFont">产品编码</span>
            </template>
          </el-input>
        </el-col>
        <el-col :span="5" :offset="1" :pull="1">
          <el-input v-model="invname" readonly="true">
            <template slot="prepend">
              <span class="searchFont">产品名称</span>
            </template>
          </el-input>
        </el-col>
        <el-col :span="5" :offset="1" :pull="1">
          <el-input v-model="clqty" readonly="true">
            <template slot="prepend">
              <span class="searchFont">车间</span>
            </template>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
            ref="feedingTable"
            :data="tableData"
            border
            height="calc(100vh - 156px)"
            highlight-current-row
            @current-change="handleCurrentChange"
            :cell-style="handleCellStyle"
            style="width: 100%"
            @row-click="onRowClick"
          >
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column property="status" label="状态">
              <template #default="scope">
                <span v-if="scope.row.status == 1">计划</span>
                <span v-else-if="scope.row.status == 2">执行</span>
                <span v-else-if="scope.row.status == 3">停止</span>
                <span v-else-if="scope.row.status == 4">完成</span>
              </template>
            </el-table-column>
            <el-table-column property="rountNo" label="工艺号" width="80">
            </el-table-column>
            <el-table-column property="inventoryID" label="物料号" width="120">
            </el-table-column>
            <el-table-column property="planQty" label="计划量">
            </el-table-column>
            <el-table-column label="已投量">
              <template #default="{ row }">
                {{ row.actQty.toFixed(3) }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="未投量">
              <template #default="{ row }">
                {{ (row.planQty + row.addQty - row.actQty).toFixed(3) }}
              </template>
            </el-table-column>
            <el-table-column prop="addQty" label="追加量"> </el-table-column>
            <!-- <el-table-column property="measuring" label="计量方式" width="150">
              <template #default="scope">
                <el-switch :value="scope.row.measuring" active-color="#13ce66" inactive-color="#ff4949" active-value="增量" inactive-value="减量" @change="jl(scope.row)">
                </el-switch>
              </template>
            </el-table-column> -->
            <el-table-column property="grossWeight" label="毛重">
            </el-table-column>
            <el-table-column property="tare" label="皮重"> </el-table-column>
            <el-table-column property="actQty" label="实投量">
            </el-table-column>
            <el-table-column property="projectBatch" label="批号">
            </el-table-column>
            <!-- <el-table-column property="tolerance" label="公差">
            </el-table-column> -->
            <el-table-column property="topLimit" label="上限">
            </el-table-column>
            <el-table-column property="lowerLimit" label="下限">
            </el-table-column>

            <el-table-column property="isBomOutInv" label="方内外料">
              <template #default="scope">
                <span v-if="scope.row.isBomOutInv == 1">方内料</span>
                <span v-else-if="scope.row.isBomOutInv == 2">方外料</span>
              </template>
            </el-table-column>
            <el-table-column
              property="scale"
              label="电子秤"
              width="80"
            ></el-table-column>
            <el-table-column property="combination" label="组合配" width="80">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-main>
    <el-footer style="padding: 0px 0px;">
      <div style="padding: 5px 0px 5px 0px;">
        <van-button
          class="tbutt"
          size="large"
          color="steelblue"
          @click="tl()"
          id="TLflag"
          >投料</van-button
        >
        <van-button
          class="tbutt"
          size="large"
          color="steelblue"
          @click="jltl()"
          id="TLflag"
          >减量法投料</van-button
        >
        <van-button
          class="tbutt"
          size="large"
          color="steelblue"
          @click="stop()"
          id="stop"
          >{{ stopLabel }}</van-button
        >
        <van-button
          class="tbutt"
          size="large"
          color="steelblue"
          @click="
            () => {
              sl();
            }
          "
          >追加数量</van-button
        >
        <van-button class="tbutt" size="large" color="steelblue" @click="wl"
          >追加物料</van-button
        >
        <van-button
          class="tbutt"
          size="large"
          color="steelblue"
          @click="tl()"
          id="PLflag"
          >配料
        </van-button>
      </div>
    </el-footer>
  </el-container>
</template>
<script>
import { ref, onMounted, watch } from "vue";
import router from "@/router";
import { Toast, Dialog } from "vant";

export default {
  setup() {
    const title = ref("投料列表");
    const feedingTable = ref({});
    const ewmMsg = ref({});
    const gdh = ref("");
    const gcdInputVal = ref(null);
    const gcdString = ref(""); //工单号
    const invid = ref("");
    const invname = ref("");
    const clqty = ref("");
    const currentRecord = ref({});
    const tableData = ref([]);
    const stopLabel = ref("停止");
    // const jl= (row) =>{
    //   console.log('计量方式',row);
    // }
    const handleGcdInputEnter = e => {
      console.log(gcdString.value);
      //if (e.keyCode == 13) {
      if (gcdString.value == "") {
        Toast.fail("工单号不能为空！");
        return;
      } else {
        DotNet.invokeMethodAsync("Rmac", "Decompress", gcdString.value).then(
          res => {
            var obj = JSON.parse(res);
            console.log(obj);
            if (obj[0][4] == 1) {
              // 判断单据类型为工单
              var PLflag = document.getElementById("PLflag");
              PLflag.style.display = "none";
              var gdh_pm = "";
              if (obj.length > 0) {
                gdh_pm = obj[0][0];
              }
              DotNet.invokeMethodAsync(
                "Rmac",
                "GetIssueList",
                JSON.stringify({ nO: gdh_pm })
              ).then(res => {
                console.log(res);
                if (res[0].status == 4) {
                  Toast.fail("工单已完成！");
                  gcdString.value = "";
                  gcdString.value.focus();
                } else {
                  gcdString.value = res[0].no;
                  invid.value = res[0].inventoryID;
                  clqty.value = res[0].deskStock;
                  //gcdInputVal.value.value = "";
                  ewmMsg.value = res[0];

                  tableData.value = res[0].fG_InvChild;
                  console.log(tableData.value);
                }
              });
              console.log("列表数组", tableData.value);
              var isFinish = true;
              tableData.value.forEach(el => {
                if (el.status != 4) {
                  isFinish = false;
                }
              });
              if (isFinish == true) {
                Dialog.confirm({
                  title: "是否确认完工？",
                  message: ""
                })
                  .then(() => {
                    // on confirm
                    DotNet.invokeMethodAsync(
                      "Rmac",
                      "UpdateIssueStatus",
                      JSON.stringify({
                        id: tableData.value[0].pid
                      })
                    ).then(res => {
                      console.log(res);
                    });
                  })
                  .catch(() => {
                    // on cancel
                  });
              }
            } else {
              // 判断单据类型为配料单
              var TLflag = document.getElementById("TLflag");
              TLflag.style.display = "none";
              title.value = "配料表";
              var gdh_pm = "";
              if (obj.length > 0) {
                gdh_pm = obj[0][0];
              }
              DotNet.invokeMethodAsync(
                "Rmac",
                "GetIssueList",
                JSON.stringify({ nO: gdh_pm })
              ).then(res => {
                console.log(res);
                if (res[0].status == 4) {
                  Toast.fail("工单已完成！");
                  gcdString.value = "";
                  gcdString.value.focus();
                } else {
                  gcdString.value = res[0].no;
                  invid.value = res[0].inventoryID;
                  clqty.value = res[0].deskStock;
                  //gcdInputVal.value.value = "";
                  ewmMsg.value = res[0];
                  tableData.value = res[0].fG_InvChild;
                  console.log(tableData.value);
                }
              });
              console.log("列表数组", tableData.value);
              var isFinish = true;
              tableData.value.forEach(el => {
                if (el.status != 4) {
                  isFinish = false;
                }
              });
              if (isFinish == true) {
                Dialog.confirm({
                  title: "是否确认完工？",
                  message: ""
                })
                  .then(() => {
                    // on confirm
                    DotNet.invokeMethodAsync(
                      "Rmac",
                      "UpdateIssueStatus",
                      JSON.stringify({
                        id: tableData.value[0].pid
                      })
                    ).then(res => {
                      console.log(res);
                    });
                  })
                  .catch(() => {
                    // on cancel
                  });
              }
            }
          }
        );
      }

      //}
    };
    const onClickLeft = () => {
      router.push("/");
    };
    const handleCurrentChange = async val => {
      currentRecord.value = val;
      if (val.status == 3) {
        stopLabel.value = "开始";
      } else {
        stopLabel.value = "停止";
      }
    };
    const sl = () => {
      console.log(currentRecord.value);
      // 判断单据类型
      if (tableData.value.length == 0) {
        Toast.fail("请扫描二维码");
        return;
      } else if (!currentRecord.value.inventoryID) {
        Toast.fail("请选择物料！");
        return;
      } else if (currentRecord.value.status == 3) {
        Toast.fail("该料已停止投料！");
        return false;
      } else if (ewmMsg.value.eviType != 1) {
        Toast.fail("配料不能追加数量！");
        return;
      } else {
        router.push({
          name: "addQty",
          params: { data: currentRecord.value }
        });
      }
    };
    const wl = () => {
      console.log(ewmMsg.value);
      // 判断单据类型
      if (tableData.value.length == 0) {
        Toast.fail("请扫描二维码");
        return;
      } else if (ewmMsg.value.eviType != 1) {
        Toast.fail("配料不能追加物料！");
        return;
      } else {
        router.push({
          name: "addInv",
          params: { data: ewmMsg.value }
        });
      }
    };

    const onRowClick = (row, column, event) => {
      //console.log('row',row);
    };
    const tl = () => {
      // console.log(currentRecord.value);
      if (!currentRecord.value.inventoryID) {
        Toast.fail("请选择物料！");
        return false;
      } else if (currentRecord.value.status == 4) {
        Toast.fail("该料已投完！");
        return false;
      } else if (currentRecord.value.status == 3) {
        Toast.fail("该料已停止投料！");
        return false;
      } else {
        router.push({
          name: "DZCLA",
          params: { data: currentRecord.value }
        });
      }
    };
    const jltl = () => {
      // console.log(currentRecord.value);
      if (!currentRecord.value.inventoryID) {
        Toast.fail("请选择物料！");
        return false;
      } else if (currentRecord.value.status == 4) {
        Toast.fail("该料已投完！");
        return false;
      } else if (currentRecord.value.status == 3) {
        Toast.fail("该料已停止投料！");
        return false;
      } else {
        router.push({
          name: "DZCL",
          params: { data: currentRecord.value }
        });
      }
    };

    const stop = () => {
      if (!currentRecord.value) {
        Toast.fail("请选择物料！");
        return;
      } else if (currentRecord.value.status == 4) {
        Toast.fail("该料已投完！");
        return false;
      } else if (currentRecord.value.status != 3) {
        currentRecord.value.status = 3;
        // 按钮改成开始
        stopLabel.value = "开始";
        //var stop = document.getElementById("stop");
        //stop.innerHTML="开始"
        DotNet.invokeMethodAsync(
          "Rmac",
          "UpdateIssueChildStatus",
          JSON.stringify(currentRecord.value)
        ).then(res => {
          console.log(res);
        });
      } else {
        currentRecord.value.status = 2;
        stopLabel.value = "停止";
        // 按钮改成停止
        //var stop = document.getElementById("stop");
        //stop.innerHTML="停止"
        DotNet.invokeMethodAsync(
          "Rmac",
          "UpdateIssueChildStatus",
          JSON.stringify(currentRecord.value)
        ).then(res => {
          console.log(res);
        });
      }
    };
    onMounted(() => {
      const record = router.currentRoute.params.data;
      console.log("路由参数", record);
      if (record && record.fG_Issue.eviType == 1) {
        var PLflag = document.getElementById("PLflag");
        PLflag.style.display = "none";
      }
      if (record && record.fG_Issue.eviType == 2) {
        var TLflag = document.getElementById("TLflag");
        TLflag.style.display = "none";
        title.value = "配料列表";
      }
      if (record && record.pid > 0) {
        DotNet.invokeMethodAsync(
          "Rmac",
          "GetIssueList",
          JSON.stringify({ id: record.pid })
        ).then(res => {
          console.log(res);
          if (res[0].status == 4) {
            Toast.fail("工单已完成！");
            gcdString.value = "";
            gcdString.value.focus();
          } else {
            gcdString.value = res[0].no;
            invid.value = res[0].inventoryID;
            clqty.value = res[0].deskStock;
            //gcdInputVal.value.value = "";
            ewmMsg.value = res[0];
            tableData.value = res[0].fG_InvChild;
            console.log(tableData.value);
          }
        });
      }
    });
    const handleCellStyle = ({ row, column, rowIndex, columnIndex }) => {
      if (column.property == "status") {
        console.log(column, columnIndex);
        console.log(row);
        var colorString = "";
        switch (row.status) {
          case 2:
            colorString = "#FFCC66";
            break;
          case 3:
            colorString = "crimson";
            break;
          case 4:
            colorString = "#66CC99";
            break;
          default:
            colorString = "white";
            break;
        }
        return `color:black;background:${colorString}`;
      }
      if (column.property == "actQty") {
        var backgroundColor = "";
        if (row.actQty > row.topLimit) {
          backgroundColor = "#FF1493";
          return `color:black;background:${backgroundColor}`;
        }
      }
    };
    watch(
      () => tableData.value,
      list => {
        console.log("表格数据监听", list);
        var isFinish = true;
        tableData.value.forEach(el => {
          if (el.status != 4) {
            isFinish = false;
          }
        });
        if (isFinish == true) {
          Dialog.confirm({
            title: "物料已投完，是否确认完工？",
            message: ""
          })
            .then(() => {
              // on confirm
              DotNet.invokeMethodAsync(
                "Rmac",
                "UpdateIssueStatus",
                JSON.stringify({
                  id: tableData.value[0].pid
                })
              ).then(res => {
                console.log(res);
              });
              // 弹窗是否打印
              Dialog.confirm({
                title: "工单已完成，是否打印二维码？",
                message: ""
              })
                .then(() => {
                  DotNet.invokeMethodAsync(
                    "Rmac",
                    "PrintIssueFinishQr",
                    JSON.stringify({ id: tableData.value[0].pid })
                  )
                    .then(res => {
                      console.log(res);
                      gdh.value = "";
                      //getData();
                    })
                    .catch(error => {
                      gdh.value = "";
                      Dialog.alert({
                        message: error
                      });
                    });
                })
                .catch(() => {});
            })
            .catch(() => {
              // on cancel
            });
        }
      }
    );
    return {
      ewmMsg,
      gdh,
      invid,
      invname,
      clqty,
      handleGcdInputEnter,
      onClickLeft,
      handleCurrentChange,
      tableData,
      sl,
      wl,
      tl,
      jltl,
      stop,
      gcdString,
      gcdInputVal,
      feedingTable,
      onRowClick,
      title,
      handleCellStyle,
      stopLabel
    };
  }
};
</script>
<style scoped>
.searchFont {
  font-size: 15px;
  /* font-family: "Lucida Calligraphy", cursive, serif, sans-serif; */
  font-weight: bold;
  color: black;
}

.tbutt {
  margin-right: 5px;
  border-radius: 15px;
  font-size: 20px;
  width: 15%;
  box-shadow: 0px 5px 19px 0px darkblue;
}
</style>
<!-- 
<style>
table {
  width: 100%;
  /*height: 400px;*/
}

.FHimg {
  text-align: left;
  padding: 10px 0 0 10px;
}

.orderOne {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
  height: 50px;
}

.orderOne p {
  color: white;
  font-size: 20px;
}

.feeding {
  display: flex;
  justify-content: space-around;
  height: 60px;
}

.feeding .font {
  font-size: 15px;
  /* font-family: "Lucida Calligraphy", cursive, serif, sans-serif; */
  font-weight: bold;
  color: white;
  height: 70px;
  padding-top: 15px;
  width: 7%;

  /* margin: 0px auto; */
}

.tatile_style {
  background-color: #eeeeee;
  resize: none;
  width: 200px;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 30px;
  font-size: 20px;
}

.example-body {
  display: flex;
  justify-content: space-around;
  bottom: 0;
  clear: both;
  margin-top: 20px;
  width: 100%;
  vertical-align: bottom;
  position: absolute;
  bottom: 20px;
}
</style> -->
